import styles from '@/styles/userList.module.less'
import { Button, Form, Input, Space, Table } from 'antd'
import { TypeUserListData } from '../../type/api'
import { getUserListAPI } from '../../api/userList'
import { useEffect, useRef, useState } from 'react'
import CreateUser from './createUser'
function UserList() {
  const [list, setList] = useState<TypeUserListData[]>([])
  const getUserListAPIFun = async () => {
    const res = await getUserListAPI()
    setList(res.list)
  }
  useEffect(() => {
    getUserListAPIFun()
  }, [list])
  const dataSource = list
  const columns = [
    {
      title: '用户ID',
      dataIndex: 'userId',
      key: 'userId'
    },
    {
      title: '用户名称',
      dataIndex: 'userName',
      key: 'userName'
    },
    {
      title: '用户邮箱',
      dataIndex: 'userEmail',
      key: 'userEmail'
    },
    {
      title: '用户角色',
      dataIndex: 'role',
      key: 'role'
    },
    {
      title: '用户状态',
      dataIndex: 'state',
      key: 'state'
    },
    {
      title: '注册时间',

      dataIndex: 'createTime',

      key: 'createTime'
    }
  ]
  const refValue = useRef<{ showModal: (type:string) => void }>()
  return (
    <div>
      <Form layout='inline'>
        <Form.Item label='用户ID'>
          <Input placeholder='请输入用户ID'></Input>
        </Form.Item>
        <Form.Item label='用户名称'>
          <Input placeholder='请输入用户名称'></Input>
        </Form.Item>
        <Form.Item label='状态'></Form.Item>
        <Form.Item>
          <Space>
            <Button type='primary'>搜索</Button>
            <Button>重置</Button>
          </Space>
        </Form.Item>
      </Form>
      <div>
        <div>用户列表</div>
        <Button type='primary' onClick={() => refValue.current?.showModal('create')}>
          新增
        </Button>
        <Button> 批量删除</Button>
      </div>
      <Table rowKey='userId' dataSource={dataSource} columns={columns} />;<CreateUser nref={refValue}></CreateUser>
    </div>
  )
}

export default UserList
